<template>
  <div class="menu-container">
    <div class="left-logo">
      <div class="app-header-title">
        <img src="../../../assets/images/home/damai.png"/>
        <Divider type="vertical" style="height: 30px;"></Divider>
        <p>{{ config.title }}</p>
      </div>
    </div>
    <div>
      <Menu mode="horizontal" :active-name="$route.name">
        <MenuItem name="WorkbenchIndex" :to="{name: 'WorkbenchIndex'}"
                  v-if="this.$utils.getUserInfo().userName !== 'customs'">
          首页
        </MenuItem>
        <!--              v-if="this.$utils.getUserInfo().userName !== 'customs' && ($utils.checkAuth('CLIENT_ORDER_TRACKING') || $utils.checkAuth('CLIENT_PLEDGED_GOODS') || $utils.checkAuth('CLIENT_RATE_QUERY')) && !$utils.getUserInfo().currentAgentPermission"-->
        <!--                <Submenu name="commerce">-->
        <!--                    <template slot="title">-->
        <!--                        商贸服务-->
        <!--                    </template>-->
        <!--&lt;!&ndash;                  v-if="$utils.checkAuth('CLIENT_ORDER_TRACKING')"&ndash;&gt;-->
        <!--                    <MenuItem name="orderQuery" :to="{name: 'orderQuery'}">-->
        <!--                        <span style="color:#000;">订单查询</span>-->
        <!--                    </MenuItem>-->
        <!--&lt;!&ndash;                  v-if="$utils.checkAuth('CLIENT_PLEDGED_GOODS')"&ndash;&gt;-->
        <!--                    <MenuItem name="goodsList" :to="{name: 'goodsList'}">-->
        <!--                        <span style="color:#000;">质押货物</span>-->
        <!--                    </MenuItem>-->
        <!--&lt;!&ndash;                  v-if="$utils.checkAuth('CLIENT_RATE_QUERY')"&ndash;&gt;-->
        <!--                    <MenuItem name="rateQuery" :to="{name: 'rateQuery'}">-->
        <!--                        <span style="color:#000;">费率查询</span>-->
        <!--                    </MenuItem>-->
        <!--                </Submenu>-->
        <!--              v-if="this.$utils.getUserInfo().userName !== 'customs' && $utils.checkAuth('CLIENT_LOGISTICS_SERVICES') && !$utils.getUserInfo().currentAgentPermission"-->
        <!--                <MenuItem name="goodsInTransit" :to="{name: 'goodsInTransit'}">-->
        <!--                    物流服务-->
        <!--                </MenuItem>-->
        <!--                <MenuItem v-if="this.$utils.getUserInfo().userName === 'customs'" name="monitor-customer-map" :to="{name: 'monitor-customer-map'}">-->
        <!--                    <span style="color:#ffffff;">货物监控</span>-->
        <!--                </MenuItem>-->
        <!--              v-if="this.$utils.getUserInfo().userName !== 'customs' && ($utils.checkAuth('CLIENT_INVENTORY') || $utils.checkAuth('CLIENT_HOMEWORK_PLAN') || $utils.checkAuth('CLIENT_CARGO_MONITORING') || $utils.checkAuth('CLIENT_BUSINESS_STATISTICS'))"-->
        <Submenu name="storage">
          <template slot="title">
            仓储服务
          </template>
          <!--                  v-if="$utils.checkAuth('CLIENT_INVENTORY')"-->
          <MenuItem name="inventoryInfo" :to="{name: 'inventoryInfo'}">
            <span style="color:#000;">库存信息</span>
          </MenuItem>
          <!--                  v-if="$utils.checkAuth('CLIENT_HOMEWORK_PLAN')"-->
          <MenuItem name="planInfo" :to="{name: 'planInfo'}">
            <span style="color:#000;">现场作业</span>
          </MenuItem>
<!--          <MenuItem name="newPlanInfo" :to="{name: 'newPlanInfo'}">-->
<!--            <span style="color:#000;">新现场作业</span>-->
<!--          </MenuItem>-->
          <MenuItem name="intoStockDetail" :to="{name: 'intoStockDetail'}">
            <span style="color:#000;">入库明细</span>
          </MenuItem>
          <MenuItem name="outStockDetail" :to="{name: 'outStockDetail'}">
            <span style="color:#000;">出库明细</span>
          </MenuItem>
          <!--                  v-if="$utils.checkAuth('CLIENT_CARGO_MONITORING')"-->
          <MenuItem name="monitor-map" :to="{name: 'monitor-map'}">
              <span style="color:#000;">货物监控</span>
          </MenuItem>
          <!--                  v-if="$utils.checkAuth('CLIENT_BUSINESS_STATISTICS')"-->
          <MenuItem name="whDaily" :to="{name: 'whDaily'}">
            <span style="color:#000;">业务统计</span>
          </MenuItem>
          <!--                  v-if="$utils.checkAuth('CLIENT_TAX_RETURN_STORAGE') && !$utils.getUserInfo().currentAgentPermission" name="bondedWarehousing"-->
          <!--                    <MenuItem :to="{name: 'bondedWarehousing'}">-->
          <!--                        <span style="color:#000;">保税仓储</span>-->
          <!--                    </MenuItem>-->
        </Submenu>
        <Submenu name="approve">
          <template slot="title">审批管理</template>
          <MenuItem name="pledgeApprove" :to="{name: 'pledgeApprove'}">
            <span style="color:#000;">质押审批</span>
          </MenuItem>
          <MenuItem name="pledgeLog" :to="{name: 'pledgeLog'}">
            <span style="color:#000;">质押记录</span>
          </MenuItem>
        </Submenu>
      </Menu>
    </div>
    <div class="right-icon">
      <!-- <Icon type="md-notifications-outline" color="#ffffff" size="25"/> -->
      <el-popover :width="500" placement="bottom" trigger="click" @show="showNotices">
        <template #reference>
          <div style="cursor: pointer;margin-top:35px;margin-right: 10px;">
            <Badge :count="notices.number" :dot="notices.number == 0 ? true : false">
              <Icon type="md-notifications-outline" color="#ffffff" size="25"
                    style="margin-left:20px;margin-bottom:30px;"></Icon>
            </Badge>
          </div>
        </template>
        <div class="notice-list" style="overflow:auto">
          <el-scrollbar>
            <el-form :inline="true" :model="formet">
              <el-form-item label="品名:" label-width="71px">
                <el-input v-model="formet.searchKey" size="small" style="width:200%" placeholder="根据品名查询"
                          @change="changeInput"/>
              </el-form-item>
              <el-form-item label="失效日期:">
                <el-date-picker
                  v-model="formet.timeList"
                  type="daterange"
                  size="small"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="changeDate"/>
              </el-form-item>
            </el-form>
            <div style="font-size: 14px;">货物失效预警</div>
            <hr style="background-color: #ddd;margin-top:10px;margin-bottom:10px;height: 1px;border: 0px;width: 96%;"/>
            <div v-for="(item, index) in notices.pushUserMiddleVos" :key="index"
                 style="color:#444;position:relative;margin-top:10px;padding-right: 15px;">
              <div v-if="item[0].clientReadPushFlag == 0" @click="readFlag(item[0]);">
                <div style="position:absolute;right:20px;">
                  {{ '统计日期:' + $utils.timestampToDateTime(item[0].platformPushDate) }}
                </div>
                <div v-for="(itemS) in item" :key="itemS.id" style="margin-left:10px;height:70px;width:220px;">
                  <div v-if="item[0].clientReadPushFlag == 0"
                       style="background-color:#e00;width: 5px;height: 5px;border-radius:50%;display:inline-block;margin-right: 5px;margin-bottom: 3px;"></div>
                  <span style="display: inline-block;"> {{ (itemS.totalWeight / 1000).toFixed(3) }}吨</span>
                  <span style="display: inline-block;">({{ itemS.caseNum }}柜)</span>
                  <span style="display:inline-block;font-weight: 700;color:blue"> {{ itemS.matName }} </span>
                  <span v-if="(itemS.dateExpire - itemS.platformPushDate) > 0" style="display:inline-block;">将于</span>
                  <span style="display:inline-block;font-weight:700;color:blue;"> {{
                      ((itemS.dateExpire - itemS.platformPushDate) > 0 ? Math.trunc((((itemS.dateExpire - itemS.platformPushDate) / 86400000))) : '已失效')
                    }}</span>{{
                    (itemS.dateExpire - itemS.platformPushDate) > 0 ? '天后失效，失效日期：' + $utils.timestampToDate(itemS.dateExpire) + '请及时处理' : ',失效日期：' + $utils.timestampToDate(itemS.dateExpire) + '请及时处理'
                  }}
                </div>
                <el-button style="float:right;position:absolute;top:40%;right:2%;z-index:1000;height: 30px;width:80px"
                           size="mini" type="primary" @click.stop="lookInfo(item[0])"> 查看详情
                </el-button>
                <hr style="background-color: #ddd;margin-top:10px;margin-bottom:10px;height: 1px;border: 0px;"/>
              </div>
            </div>
            <div v-for="(item, index) in notices.pushUserMiddleVos" :key="(index + notices.pushUserMiddleVos.length)"
                 style="color:#aaa;position:relative;margin-top:10px;padding-right: 15px;">
              <div v-if="item[0].clientReadPushFlag != 0">
                <span style="position:absolute;right:20px;"> {{
                    '统计日期:' + $utils.timestampToDateTime(item[0].platformPushDate)
                  }}</span>
                <div v-for="(itemS) in item" :key="itemS.id" style="margin-left:10px;height:70px;width:220px;">
                  <div v-if="item[0].clientReadPushFlag == 0"
                       style="background-color:#e00;width: 5px;height: 5px;border-radius:50%;display:inline-block;margin-right: 5px;margin-bottom: 3px;"></div>
                  <span style="display: inline-block;"> {{ (itemS.totalWeight / 1000).toFixed(3) }}吨</span>
                  <span style="display: inline-block;">({{ itemS.caseNum }}柜)</span>
                  <span style="display:inline-block;font-weight: 700;color:blue"> {{ itemS.matName }} </span>
                  <span v-if="(itemS.dateExpire - itemS.platformPushDate) > 0" style="display:inline-block;">将于</span>
                  <span style="display:inline-block;font-weight:700;color:blue;"> {{
                      ((itemS.dateExpire - itemS.platformPushDate) > 0 ? Math.trunc((((itemS.dateExpire - itemS.platformPushDate) / 86400000))) : '已失效')
                    }}</span>{{
                    (itemS.dateExpire - itemS.platformPushDate) > 0 ? '天后失效，失效日期：' + $utils.timestampToDate(itemS.dateExpire) + '请及时处理' : ',失效日期：' + $utils.timestampToDate(itemS.dateExpire) + '请及时处理'
                  }}
                </div>
                <el-button style="float:right;position:absolute;top:40%;right:2%;z-index:1000;height:30px;width:80px"
                           size="mini" type="primary" @click.stop="lookInfo(item[0])"> 查看详情
                </el-button>
                <hr style="background-color: #ddd;margin-bottom:10px;height: 1px;border: 0px;"/>
              </div>
            </div>
          </el-scrollbar>
        </div>
        <div class="notice-clear">
          <el-button type="text">
            <!-- <el-icon icon="close-circle-line" /> -->
            <el-popconfirm
              title="确定要清空所有的通知?"
              @confirm="handleClearNotice"
            >
              <span slot="reference">清空消息</span>
            </el-popconfirm>
          </el-button>
        </div>
      </el-popover>
      <Dropdown @on-click="dropdownClick">
        <div style="cursor: pointer">
          <Avatar icon="ios-person" style="margin-left: 20px;"/>
          <span style="color: #fff; margin-left: 10px">{{ $utils.getUserInfo().realName }}</span>
        </div>
        <DropdownMenu slot="list">
          <DropdownItem name="password">忘记密码</DropdownItem>
          <DropdownItem name="logout">退出登录</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </div>
    <update-password ref="updatePassword" />
  </div>
</template>

<script>
import {mapActions} from 'vuex';
import config from '@/config'
import {platformPageMessage, doneMessage, clearAllMessage} from '@/api/warehouse/home.js'
import UpdatePassword from "@/view/component/sidebar-menu/comp/UpdatePassword.vue";

export default {
  name: 'index',
  components: {UpdatePassword},
  data() {
    return {
      config,
      activeName: 'notice',
      notices: [],
      formet: {
        searchKey: '',
        timeList: [],
        number: 0
      },
      userInfoCode: ''
    };
  },
  methods: {
    ...mapActions('user', [
      'handleLogOut'
    ]),
    dropdownClick(name) {
      if (name === 'logout') {
        window.localStorage.removeItem('belongUserCustomerList');
        this.handleLogOut();
        this.$router.push({name: 'login'});
      }
      if (name === 'password') {
        this.$refs.updatePassword.open();
      }
    },
    getPlatformPageMessage() {
      this.$nextTick(() => {
        if (this.formet.timeList != null) {
          let body = {
            searchKey: this.formet.searchKey,
            startTime: new Date(Number(this.formet.timeList[0])),
            endTime: new Date(Number(this.formet.timeList[1])),
            customerCode: this.$utils.getUserInfo().entrustingPartyCode
          };
          platformPageMessage(body).then(reponse => {
            this.notices = reponse.data.returnData;
          });
        } else {
          let body = {
            searchKey: this.formet.searchKey,
            startTime: null,
            endTime: null,
            customerCode: this.$utils.getUserInfo().entrustingPartyCode
          };
          platformPageMessage(body).then(reponse => {
            this.notices = reponse.data.returnData;
          });
        }
      });

    },
    lookInfo(row) {
      let date = new Date().getTime();
      this.$router.push({
        name: 'inventoryInfo',
        params: {
          matName: row.matName,
          dateExpire: row.dateExpire
        },
        query: {
          dateNow: date
        }
      });
      doneMessage(row.id).then(response => {
        if (response.data.returnCode == 200) {
          this.getPlatformPageMessage();
        } else {
          this.$Message.error(response.data.returnMsg);
        }
      });
    },
    changeDate() {
      this.getPlatformPageMessage();
    },
    changeInput() {
      this.getPlatformPageMessage();
    },
    readFlag(row) {
      doneMessage(row.id).then(response => {
        if (response.data.returnCode == 200) {
          this.getPlatformPageMessage();
        } else {
          this.$Message.error(response.data.returnMsg, 'error');
        }
      });
    },
    handleClearNotice() {
      clearAllMessage().then(response => {
        console.log(response);
        if (response.data.returnCode === 200) {
          this.getPlatformPageMessage();
          this.$Message.success(response.data.returnMsg);
        } else {
          this.$Message.error(response.data.returnMsg);
        }
      }).catch(err => {
        console.log(err);
      });
    },
    showNotices() {
      this.getPlatformPageMessage();
    }
  },
  mounted() {
    let getInfo = setInterval(() => {
      if (this.$utils.getUserInfo().entrustingPartyCode) {
        this.getPlatformPageMessage();
        clearInterval(getInfo)
      }
    }, 1000)
  }
}
</script>

<style lang="less" scope>
.menu-container {
  display: flex;
  justify-content: space-between;
}

.left-logo {
  padding-left: 20px;
  width: 25vw;

  .app-header-title {
    height: 50px;
    margin-top: 10px;
    display: flex;
    align-items: center;

    img {
      height: 50px;
    }

    p {
      line-height: 30px;
      font-size: 16px;
      color: #ffffff;
    }
  }
}

.right-icon {
  width: 25vw;
  display: flex;
  justify-content: end;
  align-items: center;
  padding-right: 50px;
}

.notice-list {
  height: 29vh;

  ul {
    margin: 0;
    padding: 0 15px 0 0;

    li {
      display: flex;
      align-items: center;
      padding: 10px 0 10px 0;

      .el-avatar {
        flex-shrink: 0;
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }

      span {
        margin-left: 10px;
      }
    }
  }
}

.notice-clear {
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0 0 0;
  cursor: pointer;
  text-align: center;
  border-top: 1px solid #e8eaec;

  i {
    margin-right: 3px;
  }
}
</style>
<style lang="less">
.menu-container {
  height: 70px;

  .ivu-menu-light {
    background-color: rgba(54, 60, 77, 1);
  }

  .ivu-menu-item {
    color: #ffffff !important;
  }

  .ivu-menu-horizontal.ivu-menu-light:after {
    background: rgba(255, 255, 255, 0);
  }

  .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item:hover, .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu:hover {
    border-bottom: 4px solid #363c4d !important;
  }

  .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item-active, .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu-active, .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item-active:hover {
    border-bottom: 4px solid rgba(79, 104, 232, 1) !important;
  }

  .ivu-menu-submenu {
    color: #ffffff !important;
  }

  .ivu-menu-horizontal .ivu-menu-submenu .ivu-select-dropdown .ivu-menu-item {
    border-bottom: none !important;
    color: #2d8cf0 !important;
  }

  .ivu-menu-horizontal .ivu-menu-submenu .ivu-select-dropdown .ivu-menu-item-selected, .ivu-menu-horizontal .ivu-menu-submenu .ivu-select-dropdown .ivu-menu-item-selected:hover {
    color: #2d8cf0 !important;
  }
}
</style>
